'use client'
import Link from "next/link";
import Logo from "./logo";
import { useEffect, useState } from "react";
import Image from "next/image";
import Wechat from '@/public/wechat.svg'
import Xhs from '@/public/xhs.svg'
import lang from "../i18n";
import { tools } from "@/utils/tools";

// 链接
const Links = [
    {
        title: "iThinkAi 产品系列",
        links: [
            {title: "iThinkChat", link: "https://chat.ithinkai.cn"},
            {title: "iThinkScene", link: "https://app.ithinkai.cn"},
            {title: "iThinkAi", link: "https://app.ithinkai.cn/pages/home/home"}
        ]
    },
    {
        title: "帮助与支持",
        links: [
            {title: "更新日志", link: "https://app.ithinkai.cn"},
            {title: "服务协议", link: "https://app.ithinkai.cn"},
            {title: "公告与通知", link: "https://app.ithinkai.cn"},
            {title: "帮助文档", link: "https://app.ithinkai.cn"},
        ]
    },
    {
        title: "加入我们",
        links: [
            {title: "招聘需求", link: "https://app.ithinkai.cn"},
        ]
    },
    {
        title: "关于我们",
        links: [
            {title: "价值观", link: "https://app.ithinkai.cn"},
            {title: "团队文化", link: "https://app.ithinkai.cn"},
            {title: "愿景方向", link: "https://app.ithinkai.cn"}
        ]
    }
]
// 标语
// 第三方平台
const ThirdParty = [
    {
        icon: <Wechat/>,
        link: 'https://mp.weixin.qq.com'
    },
    {
        icon: <Xhs />,
        link: 'https://www.xiaohongshu.com/'
    },
]
export default function Footer(props){
    const Slogan = lang("footer.slogan",props.lng);
    const [ defaultSlogan, setDefaultSlogan ] = useState();
    const {
        qrcode="https://api.ithinkai.cn/api/uploads/file/undefined/89ceb44893726309d503689e40257b0b_20230801105827.png"
    } = props
    useEffect(()=>{
        tools.typeWriter(Slogan, setDefaultSlogan,"footer")
    },[])
    return (
    <footer className="footer-item bg-[#16262F] p-4">
        <div className="icon_link flex py-5">
            <div className="icon pr-7">
                <Logo type="footer"></Logo>
            </div>
            {
                Links.map((item, index) => {
                    return <div className="link flex-auto text-center" key={index}>
                        <header className="header font-bold text-lg">{item.title}</header>
                        <ul>
                            {item.links.map((link, index) => {
                                return <li key={index} className="mt-3.5">
                                    <Link href={link.link} className="font-light text-sm">
                                        {link.title}
                                    </Link>
                                </li>
                            })}
                        </ul>
                    </div>
                })
            }
        </div>
        <div className="qrcode__title flex">
            <div className="content_title flex-1 flex justify-center items-center h-[200px]">
                <div className="content  bg-gray-500 py-[15px] px-[55px] text-2xl text-white rounded-[29px]">{
                    defaultSlogan
                }</div>
            </div>
            <div className="qrcode">
                <Image
                    alt="二维码"
                    src={qrcode}
                    width={200}
                    height={200}
                ></Image>
               <div className="text-center text-sm">微信扫一扫</div>
            </div>
        </div>
        <div className="link_icon_group flex items-center justify-center mb-10 mt-[76px]">
            {
                ThirdParty.map((item, index) =>
                    <Link key={index} href={item.link} className="mr-2">
                        {
                            item.icon
                        }
                    </Link>
                )
            }
        </div>
        <div className="putfile flex justify-center items-center">
            © 广州灵境之城科技有限公司 | 
            <Link href={'https://vwjisjt7h3.feishu.cn/docx/KU1Bd4gRcoX032xTLv3cT6XRnrf'} className="ml-1 mr-1">
                隐私政策
            </Link>
            |  
            <Link href={'https://vwjisjt7h3.feishu.cn/docx/KU1Bd4gRcoX032xTLv3cT6XRnrf'} className="ml-1 mr-1">
                使用协议
            </Link>
            | 粤ICP备2023086782号
        </div>
    </footer>
    )
}